<template>
  <div class="sticky-robot">
    <video src="../../../assets/robot.webm" autoplay loop></video>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'stickyRobot',
  props: {
    active: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  }
})
</script>

<style scoped lang="scss">
.sticky-robot {
  width: 650px;
  height: 625px;
  position: absolute;
  right: 0;
  margin-right: 50px;
  background: url('@/assets/images/home/robot_bg.png') no-repeat center center / contain;

  video {
    position: absolute;
    left: 30px;
    top: 82px;
    display: inline-block;
    width: 592px;
    overflow: hidden;
    border-radius: 22px;
  }

  //.robot-inner {
  //  width: 804px;
  //  height: 558px;
  //  border: 2px solid #ffffff;
  //  border-radius: 30px;
  //  margin: 0 auto;
  //  position: relative;
  //  z-index: 10;
  //  padding: 20px;
  //  box-sizing: border-box;
  //  background-color: rgba(255, 255, 255, 0.5);
  //}
  //
  //.bottom {
  //  position: absolute;
  //  bottom: 0;
  //  left: 0;
  //  width: 846px;
  //  height: 496px;
  //  background: linear-gradient(180deg, #1badbb 0%, rgba(255, 255, 255, 0.52) 100%);
  //  border-radius: 20px;
  //}
}
</style>
